<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-22 20:17:51
-->
<template>
<!-- 创建图表容器 容纳图表 -->
  <div ref='root' style="height:150px;"></div>

</template>

<script>
import { Sankey } from '@antv/g2plot';
//1.引入组件
export default {
  data(){
    return{
    
    }
  },

  mounted(){
    this.initCharts();
  },
  methods:{
    initCharts(){
      const DATA = [
        { source: '一线1', target: 'UV', value: 40 },
        { source: '一线2', target: 'UV', value: 35 },
        { source: '一线3', target: 'UV', value: 25 },
        { source: '一线4', target: 'UV', value: 15 },
        { source: '一线5', target: 'UV', value: 13 },
        { source: '一线6', target: 'UV', value: 27 },
        { source: 'UV', target: '二线1', value: 25 },
        { source: 'UV', target: '二线2', value: 35 },
        { source: 'UV', target: '二线3', value: 30 },
        { source: 'UV', target: '二线4', value: 25 },
        { source: 'UV', target: '二线5', value: 10 },
        { source: 'UV', target: '二线6', value: 30 },
        
      ];
      let sankey = new Sankey(this.$refs['root'],{
          data: DATA,
          sourceField: 'source',
          targetField: 'target',
          weightField: 'value',
          nodeWidthRatio: 0.008,
          nodePaddingRatio: 0.03,
          
      });
      //4.
      sankey.render();
    }
  }
}
</script>